KarlComSe /
SvenskaElsparkcyklarAB
| Conditions | 15 |
| Total Lines | 101 |
| Code Lines | 92 |
| Lines | 0 |
| Ratio | 0 % |
| Tests | 11 |
| CRAP Score | 75.4318 |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like AllZones.tsx ➔ AllZones often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | |||
| 12 | |||
| 13 | export default function AllZones() { |
||
| 14 | 1 | const [city, setCity] = useState("Välj stad"); |
|
| 15 | 1 | const [zoneDataParking, setZoneDataParking] = useState<Zone[]>(); |
|
| 16 | 1 | const [zoneDataLoading, setZoneDataLoading] = useState<Zone[]>(); |
|
| 17 | 1 | const [zoneDataTotal, setZoneDataTotal] = useState<Zone[]>(); |
|
| 18 | 1 | const [bikeTotal, setBikeTotal] = useState<Scooter[]>(); |
|
| 19 | 1 | const [stadTitel, setStadTitel] = useState(""); |
|
| 20 | |||
| 21 | 1 | const changeCity = (e: React.ChangeEvent<HTMLSelectElement>)=> { |
|
| 22 | const selectedCity = e.target.value as "Göteborg" | "Jönköping" | "Karlshamn"; |
||
| 23 | 5 | if (selectedCity === "Göteborg" || selectedCity === "Jönköping" || selectedCity === "Karlshamn") { |
|
| 24 | setCity(selectedCity); |
||
| 25 | } |
||
| 26 | } |
||
| 27 | |||
| 28 | 1 | const loadZoneData = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { |
|
| 29 | e.preventDefault(); |
||
| 30 | try |
||
| 31 | { |
||
| 32 | const responseParking = await axios.get(`${API_URL}/zone?type=parking&includes=bikes&city=${city}`); |
||
| 33 | const responseLoading = await axios.get(`${API_URL}/zone?type=charging&includes=bikes&city=${city}`); |
||
| 34 | setZoneDataLoading(responseLoading.data.zones); |
||
| 35 | setZoneDataParking(responseParking.data.zones); |
||
| 36 | const totalZones = responseLoading.data?.zones?.concat(responseParking.data?.zones); |
||
| 37 | setZoneDataTotal(totalZones); |
||
| 38 | let bikes: Scooter[] = []; |
||
| 39 | totalZones.map((zone: Zone) => { |
||
| 40 | 2 | if (zone.bikes) { |
|
| 41 | bikes = bikes.concat(zone.bikes); // Lägg till bikes om de finns |
||
| 42 | } |
||
| 43 | }); |
||
| 44 | setBikeTotal(bikes); |
||
| 45 | setStadTitel(city); |
||
| 46 | |||
| 47 | } catch (error) |
||
| 48 | { |
||
| 49 | console.log(error); |
||
| 50 | } |
||
| 51 | |||
| 52 | } |
||
| 53 | |||
| 54 | 1 | return ( |
|
| 55 | <div data-testid="allzones"> |
||
| 56 | <AdminGate/> |
||
| 57 | <div className="flex justify-center items-center space-x-4"> |
||
| 58 | <div className="mb-2 block"> |
||
| 59 | <Label htmlFor="stad" value="Välj stad" /> |
||
| 60 | </div> |
||
| 61 | <div className="mb-2 block"> |
||
| 62 | <Select id="stad" value={city} onChange={(e) => changeCity(e)} required> |
||
| 63 | {city === "Välj stad" && <option value="Välj stad">Välj stad</option>} |
||
| 64 | <option>Göteborg</option> |
||
| 65 | <option>Jönköping</option> |
||
| 66 | <option>Karlshamn</option> |
||
| 67 | </Select> |
||
| 68 | </div> |
||
| 69 | |||
| 70 | <div className="mb-2 block"> |
||
| 71 | <Button disabled={city === "Välj stad"} onClick={(e) => loadZoneData(e)}> |
||
| 72 | Tryck för att ladda zoner/cyklar |
||
| 73 | </Button> |
||
| 74 | </div> |
||
| 75 | </div> |
||
| 76 | <Map city={city} zoneData={zoneDataTotal ?? []} scooterData={bikeTotal ?? []}/> |
||
| 77 | <div> |
||
| 78 | <h1>Parkeringszoner i {stadTitel}</h1> |
||
| 79 | { |
||
| 80 | zoneDataParking?.map((zone: Zone) => ( |
||
| 81 | <div key={zone.id}> |
||
| 82 | |||
| 83 | <div className="flex flex-wrap items-center gap-4 p-4 mb-4 bg-gray-50 rounded-lg shadow dark:bg-gray-700"> |
||
| 84 | <Badge color="info"><span className="font-bold text-xl">Name: {zone.name}</span></Badge> |
||
| 85 | <Badge color="success"><span className="font-bold text-xl">id: {zone.id}</span></Badge> |
||
| 86 | <Badge color="info"><span className="font-bold text-xl">Type: {zone.type}</span></Badge> |
||
| 87 | <Badge color="warning"><span className="font-bold text-xl">Number of bikes: {zone.bikes?.length}</span></Badge> |
||
| 88 | |||
| 89 | </div> |
||
| 90 | <ZoneTable zone={zone}/> |
||
| 91 | </div>)) |
||
| 92 | } |
||
| 93 | </div> |
||
| 94 | <div> |
||
| 95 | <h1>Laddzoner i {stadTitel}</h1> |
||
| 96 | { |
||
| 97 | zoneDataLoading?.map((zone: Zone) => ( |
||
| 98 | <div key={zone.id}> |
||
| 99 | |||
| 100 | <div className="flex flex-wrap items-center gap-4 p-4 mb-4 bg-gray-50 rounded-lg shadow dark:bg-gray-700"> |
||
| 101 | <Badge color="info"><span className="font-bold text-xl">Name: {zone.name}</span></Badge> |
||
| 102 | <Badge color="success"><span className="font-bold text-xl">id: {zone.id}</span></Badge> |
||
| 103 | <Badge color="info"><span className="font-bold text-xl">Type: {zone.type}</span></Badge> |
||
| 104 | <Badge color="warning"><span className="font-bold text-xl">Number of bikes: {zone.bikes?.length}</span></Badge> |
||
| 105 | </div> |
||
| 106 | <ZoneTable zone={zone}/> |
||
| 107 | </div>)) |
||
| 108 | } |
||
| 109 | </div> |
||
| 110 | |||
| 111 | |||
| 112 | </div> |
||
| 113 | ); |
||
| 115 |
